<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<!--by yjn-->
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/css/admin_register_account.css"/>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <title>admin_register_account</title>
</head>
<body>
<!--顶部导航栏-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: black">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" style="color: white;font-family: 'Arial Narrow'"><i class="fa fa-cloud fa-lg"></i>Libraby</a>
            <a class="navbar-brand" href="/reader_searchbook(no)" style="color: white">Home</a>
            <a class="navbar-brand" href="/admin/index" style="color: white">Admin</a>
            <a class="navbar-brand" href="/admin/tochange" style="color: white">About me</a>
<!--            <a class="navbar-brand" href="/admin/myindex" style="color: white">Acount information</a>-->
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="/admin/basereturn" style="color: white"><span class="glyphicon glyphicon-cog" style="color: white">Set</span></a></li>
            <li><a href="/admin/logout" style="color: white"><span class="glyphicon glyphicon-log-out" style="color: white"></span>Log out</a></li>
        </ul>
    </div>
</nav>

<div class="container">
    <!--    头像图标-->
    <div class="ur1">
        <a class="navbar-brand" style="color: black;font-size: 30px;">
            <i class="fa fa-user-o fa-3x"></i></a>
    </div>

    <!--    表格-->
    <div class="tab">
        <table class="layui-hide" id="userTable" lay-filter="userTable"></table>

        <div style="display: none;" id="userToolBar">
            <button type="button" class="layui-btn layui-btn-sm" lay-event="add">Add</button>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm delAll" lay-event="batchDelete" id="bdel">BatchDelete</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-event="reload">Reload</button>
        </div>

        <div id="userBar" style="display: none">
            <a class="layui-btn layui-btn-xs" lay-event="edit">Edit</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" id="del">Delete</a>
        </div>
    </div>

    <!--    添加和修改的弹出层-->
    <div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
        <form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        UName:
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" id="usr" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">
                        PNumber:
                    </label>
                    <div class="layui-input-inline">
                        <input type="tel" name="phonenum" id="phone" lay-verify="required" disabled="true" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">
                        PWord:
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" id="pwd" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item" style="text-align: center">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">Submit</button>
                    <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-close">Cancel</button>
                </div>
            </div>
        </form>
    </div>

    <!--    底部-->
    <div class="footer">
        <div>
            <img src="/images/mandarin.png"  class="mandarin">
        </div>
        <p style=" margin-top: 2%; margin-left: 35%;position: absolute; color: white;font-size: 25px;">
            Shan ICP Number 18018134 | Powered by 1713011</p>
    </div>
</div>

</body>
<script src="/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['jquery', 'layer', 'form', 'table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;


        //渲染数据表格
        var tableIns=table.render({
            elem: '#userTable' //渲染的目标
            , url: '/admin/list' //数据接口
            , title: '用户数据表' //数据导出来的标题
            ,toolbar:"#userToolBar"
            ,defaultToolbar:['filter','print']
            // ,width:'80%' 表格宽度
            //height表格高度
            // ,cellMinWidth:100//设置默认最小宽度
            ,done:function(res,curr,count) {
                // alert(res);//后台url返回的json串
                // alert(curr);//当前页
                // alert(count);//数据总条数
            }
            ,totalRow:true //开启合计行
            , page: true //是否启用分页
            ,limit:6 //设置每页显示的条数
            // ,limits[20,40,60,80]
            ,limits:[6,12,18,24,30]
            ,text: {
                none: 'No relevant data' //默认：无数据
            }
            , cols: [
                [ //列表数据
                    {type: 'checkbox', fixed: 'left'}
                    , {type:'numbers', width: 150,align:'center',sort:true,fixed: true}//field: 'id', title: 'ID'
                    , {field: 'lname', title: 'UserName', width: 150,align:'center'}
                    , {field: 'phone', title: 'PhoneNumber', width: 200,align:'center'}
                    , {field: 'password', title: 'PassWord', width: 200,align:'center'}
                    // , {
                    //     field: 'email', title: 'Email', width: 150, templet: function (res) {
                    //         return '<em>' + res.email + '</em>'
                    //     }
                    // }
                    ,{fixed:'right',title:'Do',toolbar:'#userBar',width:160,align:'center'}
                ]
            ]
        });

        //监听头部事件
        table.on("toolbar(userTable)", function (obj) {
            switch (obj.event) {
                case'add':
                    $('#phone').removeAttr("disabled");
                    openAddUser();
                    break;
                case'reload':
                    tableIns.reload();
                    break;
                case'batchDelete':
                    deleteAll();
                    break;

            }
        });

        var url;
        var mainIndex;
        //打开添加页面
        function openAddUser(){
            mainIndex=layer.open({
                type:1,
                title:'Add user',
                content:$("#saveOrUpdateDiv"),
                area:['500px'],
                success:function (index) {
                    //清空
                    $("#dataFrm")[0].reset();
                    url="/admin/add";
                }
            })
        }

        //打开修改(编辑）页面
        function  openUpdateUser(data){
            mainIndex=layer.open({
                type:1,
                title:'Change user-info',
                content:$("#saveOrUpdateDiv"),
                area:['500px'],
                success:function (index) {
                    form.val("dataFrm",{
                        "username":data.lname,
                        "phonenum":data.phone,
                        "password":data.password
                    });
                    url="/admin/modify";
                }
            })
        }

        //保存提交
        form.on("submit(doSubmit)",function (obj) {
            //序列化表单数据
            var params=$("#dataFrm").serialize();
            alert(params);
            // $.post(url,params,function (obj) {
            //     layer.msg(obj);
            //
            //     //关闭弹出层
            //     layer.close(mainIndex);
            //
            //     //刷新数据
            //     tableIns.reload();
            //
            // })
            var usr=document.getElementById("usr");
            var p = document.getElementById("phone").value;
            var phone=document.getElementById("phone");
            var pwd=document.getElementById("pwd");
            //p = obj.data.phone;
            console.log("urL;",url);
            console.log("打印name：",usr.value);
            console.log("打印电话号码：",p);
            if(url==='/admin/add'){
                $.ajax({
                    url:'/admin/add',
                    type:'post',
                    dataType:'json',
                    data: {
                        nickname:usr.value,
                        telephone:p,
                        password:pwd.value
                    },
                    success:function(suc){
                        if(suc.code==1){
                            layer.msg("successful！",{icon:1});
                            layer.close(mainIndex);
                            tableIns.reload();
                        }
                        else{
                            layer.msg(suc.msg,{icon:5});
                        }
                    }
                });
            }
            else{
                $.ajax({
                    url:url,
                    type:'post',
                    dataType:'json',
                    data:{
                        phone:p,
                        phone1:phone.value,
                        lname:usr.value,
                        password:pwd.value
                    },
                    success:function(suc){
                        if(suc===true){
                            layer.msg("successful！",{icon:1});
                            layer.close(mainIndex);
                            tableIns.reload();
                        }
                        else{
                            layer.msg("fail！",{icon:5});
                        }
                    }
                })
            }

        });

        //批量删除
        function deleteAll(){
            var checkStatus = table.checkStatus('userTable'),
                data = checkStatus.data,
                userPh ="";
            if(data.length > 0) {
                for (var i in data) {
                    userPh+=data[i].phone+",";
                }
                console.log(userPh);
                layer.confirm('Are you sure you want to delete the selected data?',{icon: 3, title: 'sure?'},function (index) {
                    $.ajax({
                        url:'/admin/batch_delete',
                        type:'post',
                        dataType:'json',
                        data:{phonelist:userPh},
                        success:function(suc){
                            if(suc===true){
                                layer.msg("successful！",{icon:1});
                                tableIns.reload(true);
                                layer.close(index);
                            }
                            else{
                                layer.msg("fail！",{icon:5});
                            }
                        }
                    })
                });
            }else{
                layer.msg('At least one must be selected ~',{icon: 2});
                // layer.msg('请选择需要删除的数据');
            }
        }

        // $(".delAll").on("click",(function(){
        //    deleteAll();
        // }));

        //监听复选框事件
        table.on('checkbox(userTable)', function (obj) {
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });

        //监听单元格编辑
        table.on('edit(userTable)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
            //发送后端post请求
            // $.post("url?"+obj.field+"&id="+obj.data.id,function (json) {
            //
            // })
        });

        //监听行单击事件
        table.on('row(userTable)', function(obj){
            console.log(obj.tr) //得到当前行元素对象
            console.log(obj.data) //得到当前行数据
        });


        //监听行工具事件
        table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var myphone = data.phone;
            if(layEvent === 'del'){ //删除
                layer.confirm('Are you sure to delete?', function(index){
                    layer.msg('Delete');
                    layer.close(index);
                    obj.del();
                    //向服务端发送删除指令 post
                    $.ajax({
                        url:'/admin/delete',
                        type:'post',
                        data:{'phone':data.phone},
                        success:function(data){
                            console.log(data);
                            if(data==true){
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                                console.log(index);
                                layer.msg("successfully deleted！",{icon:1});
                            }
                            else{
                                layer.msg("failed to delete！",{icon:5});
                            }
                        }
                    });

                });
            } else if(layEvent === 'edit'){ //编辑
                console.log("myphone:"+data.phone);
                // console.log("测试：",JSON.stringify(data));
                $('#phone').attr("disabled",true)
                openUpdateUser(data);
                //同步更新缓存对应的值
            }
        });

    });
</script>
</html>